<template>
  <div class="retail">
    <div class="retail-left">
      <div class="l-header">
        <div class="l-header_left">商品列表</div>
        <div class="l-header_right">清空列表</div>
      </div>
      <div v-if="true" class="l-content">
        <div class="l-content_goods">
          <div class="l-content_goods-item">
            <div class="l-content_goods-item--name">
              <div class="n_top">
                <span>B2-1016抹胸系列-蕾丝花</span>
              </div>
              <div class="n_bottom">B2-1016抹胸系列-蕾丝花</div>
            </div>
            <div class="l-content_goods-item--spec">粉色/70A</div>
            <div class="l-content_goods-item--quantity">X<span>1</span></div>
            <div class="l-content_goods-item--amount">￥268</div>
          </div>
        </div>
        <div class="l-content_divider">
          <p>以下是赠送商品</p>
          <div class="l-content_divider--line"></div>
        </div>
        <div class="l-content_goods">
          <div class="l-content_goods-item">
            <div class="l-content_goods-item--name">
              <div class="n_top">
                <span>B2-1016抹胸系列-蕾丝花</span>
                <p class="n_top--tag">赠</p>
              </div>
              <div class="n_bottom">B2-1016抹胸系列-蕾丝花</div>
            </div>
            <div class="l-content_goods-item--spec">粉色/70A</div>
            <div class="l-content_goods-item--quantity">X<span>1</span></div>
            <div class="l-content_goods-item--amount">
              <p>￥0</p>
              <p>￥268</p>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="l-empty">
        <img class="l-table_empty-img" src="https://aoxqwl-static.oss-cn-shenzhen.aliyuncs.com/image/web-shop/empty.png"
          alt="">
        <p class="l-table_empty-text">暂无商品</p>
        <button class="l-table_empty-button" @click="goodsDrawerActive = true">点击添加</button>
      </div>
      <div class="l-bottom">
        <div class="b-item l-bottom-total">
          <div class="t-value">5</div>
          <div class="t-label">合计件数</div>
        </div>
        <div class="b-item l-bottom-total">
          <div class="t-value">5</div>
          <div class="t-label">合计积分</div>
        </div>
        <div class="b-item l-bottom-total">
          <p class="t-value--del">￥268</p>
          <div class="t-value">￥999</div>
          <div class="t-label">合计金额</div>
        </div>
        <div class="b-item l-bottom-button_add" @click="goodsDrawerActive = true">
          <span class="l-bottom-button_add--icon iconfont icon-jiahao"></span>
          添加商品
        </div>
      </div>
    </div>
    <div class="retail-center">
      <div class="retail-center_counter" :class="{ 'retail-center--active' : true }">
        <div class="retail-center_counter-btn">
          <span class="iconfont icon-minus"></span>
        </div>
        <p class="retail-center_counter-quantity">0</p>
        <div class="retail-center_counter-btn">+</div>
      </div>
      <button class="retail-center_btn" :class="{ 'retail-center--active' : true }">赠送</button>
      <button class="retail-center_btn" :class="{ 'retail-center--active' : true }">挂单</button>
      <button class="retail-center_btn" :class="{ 'retail-center--active' : true }">删除</button>
    </div>
    <div class="retail-right">
      <div class="r-card" @click.prevent="$router.push('/member/supreme')">
        <div class="c-header">
          <div class="h-left">
            <p class="h-left--name">
              李嘉贤
              <img :src="prefixOssUrl('distributorSign.png')" alt="">
            </p> 13625843699
          </div>
          <div class="h-button" :class="{'h-button_active' : false }" @click.stop="selectMember">
            {{ false ? '退出会员' : '选择会员'}}
          </div>
        </div>
        <div class="c-cell">
          <span class="c-label">会员类型：</span>至尊会员
        </div>
        <div class="c-cell">
          <span class="c-label">店主：</span>刘德华/19989917998
        </div>
        <div class="c-cell">
          <span class="c-label">推荐：</span>刘德华/19989917998
        </div>
        <div class="c-cell">
          <span class="c-label">股东：</span>刘德华/19989917998
        </div>
        <div class="c-integral">
          <div class="c-integral_item">
            <p class="i-value">1099</p>
            <p class="i-label">市场积分</p>
          </div>
          <div class="c-integral_line"></div>
          <div class="c-integral_item">
            <p class="i-value">4</p>
            <p class="i-label">基础积分</p>
          </div>
        </div>
        <div class="c-wallet" @click.stop="toUpDrawerActive = true">
          <img class="w-img" :src="prefixOssUrl('balanceAccount.png')" alt="">
          <div class="w-content">
            <div class="w-header">
              <div class="w-header_left">至尊钱包</div>
              <div class="w-header_right">充值</div>
            </div>
            <div class="w-total">323132.12</div>
            <div class="w-footer">
              <span class="f-item">余额：231231</span>
              <span class="f-item">奖励：32213</span>
            </div>
          </div>
        </div>
      </div>
      <div class="r-cell">
        <div class="c-left">活动记录</div>
        <div class="c-right">
          <div class="r-text">查看更多</div>
          <div class="r-icon iconfont icon-youjiantou"></div>
        </div>
      </div>
      <div class="r-footer">
        <button class="r-footer_btn r-footer_btn--pay" :class="{ 'r-footer_btn--active' : true }" @click="toPay">
          <span class="b-icon iconfont icon-qiandai"></span>
          结账
        </button>
      </div>
    </div>
    <to-up-drawer></to-up-drawer>
    <pay-drawer></pay-drawer>
    <goods-drawer></goods-drawer>
    <member-select-drawer></member-select-drawer>
  </div>
</template>

<script setup>
  import {
    ref,
    provide,
    inject
  } from 'vue';
  import payDrawer from './pay.vue';
  import goodsDrawer from './goods.vue';
  import memberSelectDrawer from './member-select.vue';
  import toUpDrawer from './to-up.vue';

  const {
    prefixOssUrl
  } = inject('globalMethods');

  let toUpDrawerActive = ref(false);
  provide('toUpDrawerActive', toUpDrawerActive);

  let goodsDrawerActive = ref(false);
  provide('goodsDrawerActive', goodsDrawerActive);

  let memberSelectDrawerActive = ref(false);
  provide('memberSelectDrawerActive', memberSelectDrawerActive);

  const selectMember = () => {
    memberSelectDrawerActive.value = true;
  }

  let payDrawerActive = ref(false);
  provide('payDrawerActive', payDrawerActive);
  const toPay = () => {
    payDrawerActive.value = true;
  }
</script>

<style lang="less">
  .retail {
    display: flex;
    width: 100%;
    height: 100%;
    background: #ececec;

    &-left {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      border-right: 1px solid #E5E5E5;

      .l-header {
        display: flex;
        justify-content: space-between;
        height: 74px;
        font-size: 26px;
        font-weight: 500;
        color: #2E323D;
        background: #fff;
        border-bottom: 1px solid #ccc;

        &_left {
          height: 74px;
          padding-left: 30px;
          line-height: 74px;
        }

        &_right {
          height: 74px;
          padding-right: 30px;
          color: #EC3F14;
          line-height: 74px;
        }
      }

      .l-content {
        flex: 1;
        background: #fff;
        overflow-y: auto;

        &_goods {
          width: 100%;

          &-item {
            display: flex;
            height: 78px;
            margin: 20px 30px;
            border-bottom: 1px solid #F8F8F8;

            &:nth-last-child(1) {
              border: none;
            }

            &--name {
              flex: 1;

              .n_top {
                display: flex;
                align-items: center;

                >span {
                  font-size: 24px;
                  font-weight: 500;
                  color: #2E323D;
                }

                &--tag {
                  padding: 2px 5px;
                  margin-left: 18px;
                  font-size: 18px;
                  font-weight: 500;
                  color: #666;
                  text-align: center;
                  line-height: 28px;
                  background: #FFF;
                  border: 1px solid #AAA;
                  border-radius: 2px;
                }
              }

              .n_bottom {
                font-size: 22px;
                font-weight: 500;
                color: #4A5060;
              }
            }

            &--spec {
              width: 150px;
              font-size: 22px;
              font-weight: 500;
              color: #2E323D;
              text-align: left;
            }

            &--quantity {
              width: 100px;
              font-size: 18px;
              font-weight: 400;
              color: #2E323D;
              text-align: right;

              >span {
                font-size: 24px;
                font-weight: bold;
              }
            }

            &--amount {
              width: 150px;
              font-size: 24px;
              font-weight: bold;
              color: #2E323D;
              text-align: right;

              >p+:nth-child(2) {
                font-size: 20px;
                font-weight: 500;
                color: #999;
                text-decoration: line-through;
              }
            }
          }
        }

        &_divider {
          display: flex;
          align-items: center;
          padding-left: 30px;

          >p {
            width: 200px;
            height: 36px;
            font-size: 24px;
            font-weight: 500;
            line-height: 36px;
            color: #999;
          }

          &--line {
            flex: 1;
            height: 1px;
            background: #E5E5E5;
          }
        }
      }

      .l-empty {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;

        &-img {
          width: 260px;
          height: 202px;
        }

        &-text {
          margin: 20px 0;
          font-size: 26px;
          font-weight: 400;
          color: #999;
          text-align: center;
          line-height: 25px;
        }

        &-button {
          width: 148px;
          height: 44px;
          font-size: 24px;
          font-weight: 500;
          color: #1981F4;
          text-align: center;
          line-height: 44px;
          background: #E5F2FF;
          border: 1px solid #1981F4;
          border-radius: 22px;
        }
      }

      .l-bottom {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 128px;
        margin-top: 5px;
        background: #FFF;

        .b-item {
          margin-right: 20px;
        }

        &-total {
          position: relative;
          margin-right: 30px;
          font-size: 30px;
          text-align: right;

          .t-value {
            height: 32px;
            color: #1981F4;

            &--del {
              position: absolute;
              top: -20px;
              right: 0;
              font-size: 20px;
              font-weight: 500;
              color: #999;
              text-decoration: line-through;
            }
          }

          .t-label {
            font-size: 28px;
            color: #4A5060;
          }
        }

        &-button_add {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 220px;
          height: 88px;
          font-size: 28px;
          font-weight: 500;
          color: #FFF;
          text-align: center;
          line-height: 88px;
          background: #1981f4;
          border-radius: 5px;

          &--icon {
            padding-top: 5px;
            margin-right: 10px;
            font-size: 38px;
          }

        }
      }

    }

    &-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 200px;
      background-color: #fff;

      &_counter {
        margin-top: 30px;
        font-size: 48px;
        font-weight: bold;
        color: #505160;
        opacity: 0.5;

        &-btn {
          width: 140px;
          height: 60px;
          text-align: center;
          line-height: 60px;
          background: #F0F0F0;
          border: 1px solid #E5E5E5;
          border-radius: 4px 4px 0px 0px;

          >span {
            font-size: 34px;
          }
        }

        &-quantity {
          width: 140px;
          height: 88px;
          text-align: center;
          line-height: 88px;
          background: #FFF;
          border: 1px solid #E5E5E5;
        }
      }

      &_btn {
        width: 140px;
        height: 60px;
        margin-top: 20px;
        font-size: 26px;
        font-weight: 500;
        color: #2E323D;
        background: #F8F8F8;
        border: 1px solid #E5E5E5;
        opacity: 0.5;
        border-radius: 5px;
      }

      &--active {
        opacity: 1;
      }

    }

    &-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-left: 10px;
      width: 670px;
      background: #FFF;

      .r-card {
        width: 570px;
        padding: 20px;
        margin-top: 20px;
        background: #6D6E83;
        border-radius: 5px;

        .c-header {
          display: flex;
          justify-content: space-between;

          .h-left {
            display: flex;
            align-items: center;
            font-size: 30px;
            font-weight: bold;
            color: #FFF;
            text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.4);

            &--name {
              position: relative;
              margin-right: 20px;

              >img {
                position: absolute;
                top: -12px;
                right: -15px;
                width: 30px;
                height: 30px;
              }
            }

          }

          .h-button {
            width: 108px;
            height: 44px;
            font-size: 20px;
            font-weight: 400;
            color: #FFF;
            text-align: center;
            line-height: 44px;
            background: #1ABD69;
            box-shadow: 0px 4px 12px 0px rgba(60, 60, 60, 0.3);
            border-radius: 5px;

            &_active {
              background: #FE9900;
            }
          }
        }

        .c-cell {
          display: flex;
          align-items: center;
          margin-bottom: 5px;
          font-size: 24px;
          color: #FFF;

          .c-label {
            font-size: 22px;
            font-weight: 500;
            color: #DDDEE2;
          }

        }

        .c-integral {
          display: flex;
          align-items: center;
          height: 98px;
          margin: 20px 0;
          border-top: 1px solid #808196;
          border-bottom: 1px solid #808196;

          &_line {
            width: 1px;
            height: 64px;
            background: #808196;
          }

          &_item {
            flex: 1;
            text-align: center;

            .i-value {
              margin-bottom: 10px;
              font-size: 28px;
              font-weight: 600;
              color: #FFF;
              line-height: 18px;
            }

            .i-label {
              font-size: 24px;
              font-weight: 500;
              color: #DDDEE2;
            }
          }
        }

        .c-wallet {
          position: relative;
          width: 530px;
          height: 124px;
          padding: 20px;

          .w-img {
            position: absolute;
            left: 0;
            top: 0;
            width: 570px;
            height: 164px;
          }

          .w-content {
            position: absolute;
            z-index: 9;
            width: 530px;
            height: 124px;

            .w-header {
              display: flex;
              justify-content: space-between;

              &_left {
                font-size: 26px;
              }

              &_right {
                width: 68px;
                height: 44px;
                font-size: 24px;
                color: #FFF;
                text-align: center;
                line-height: 44px;
                background: #13BE75;
                border-radius: 5px;
              }
            }

            .w-total {
              font-size: 32px;
              font-weight: bold;
              color: #4A5060;
            }

            .w-footer {
              font-size: 24px;
              font-weight: 500;
              color: #4A5060;
            }
          }

        }
      }

      .r-cell {
        display: flex;
        justify-content: space-between;
        width: 570px;
        height: 74px;
        margin-top: 20px;
        font-size: 26px;
        line-height: 74px;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;

        .c-left {
          font-weight: 500;
          color: #2E323D;
        }

        .c-right {
          display: flex;
          align-items: center;
          font-weight: 400;
          color: #999;

          .r-text {}

          .r-icon {
            font-size: 36px;
          }
        }
      }

      .r-footer {
        position: fixed;
        bottom: 20px;
        display: flex;
        align-items: center;
        font-size: 30px;
        font-weight: 400;

        &_btn {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 88px;
          color: #FFF;
          background: #1981F4;
          border-radius: 5px;
          opacity: 0.5;

          .b-icon {
            margin-right: 10px;
            font-size: 38px;
          }

          &--pay {
            width: 610px;
          }

          &--active {
            opacity: 1;
          }
        }
      }
    }
  }
</style>